.LoginModal {
  @apply absolute top-0 right-0 bottom-0 left-0 flex justify-center items-center;
  z-index: 400;
  transition: all 0.3s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  .content {
    width: 300px;
    .appCompBg();
    @apply p-7 shadow rounded-xl flex flex-col items-center justify-between gap-10;
  }

}

.loginInput {
  height: 44px;
  width: 100%;
  border: 1px solid rgba(var(--design-rgba-distant), 0.2);
  background-color: rgba(var(--design-rgba-distant), 0.2);
  border-radius: 6px;
  padding: 0 16px;
  transition: border-color 300ms;

  &:focus {
    border-color: var(--design-base-color);
  }
}

.loginBtn {
  height: 40px;
  width: 100%;
  background-color: rgba(var(--design-rgba-distant), 0.2);
  transition: background-color 300ms;
  border-radius: 6px;

  &:hover {
    background-color: rgba(var(--design-rgba-distant), 0.3);
  }
}